<html>
<head>
<meta charset="utf-8">
<link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="static/assets/global/css/components.css" rel="stylesheet" type="text/css"/>
<link href="static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
<script src="static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>

</head>

<body class="login">
  <div class="content">
    <h3 class="form-title">获取otp信息</h3>
    <div class="form-group">
      <label class="control-label">手机号</label>
      <div>
        <input class="form-control" type="text" placeholder="手机号" name="telphone" id="telphone"/>
      </div>
    </div>
    <div class="form-actions">
      <button class="btn blue"type="submit" id="getotp">
        获取otp短信
      </button>
    </div>
  </div>
</body>

<script>
  jQuery(document).ready(function() {
    //绑定otp的click事件用于向后端发送获取手机验证码的请求
    $("#getotp").on("click", function() {
      var telphone = $("#telphone").val();
      if (telphone == null || telphone == "") {
        alert("手机号不能为空!");
        return false;
      }
      $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded",
        url:"http://localhost:9000/user/getotp",
        data:{
          "telphone":$("#telphone").val(),
        },
        xhrFields: {withCredentials: true}, //解决跨域请求问题
        success:function(data) {
          if (data.status == "success") {
            alert("otp已经发送到您的手机上，请注意查收！");
            window.location.href = "register.html";
          } else {
            alert("otp发送失败，原因为" + data.data.errMsg);
          }
        },
        error:function(data) {
          alert("otp发送失败，原因为" + data.responseText);
        }
      });
      return false;
    });
  });
</script>

</html>
